<script setup lang="ts">
import {onMounted, reactive, Ref, ref} from "vue";
import * as echarts from "echarts";
import { getOrgsRank } from "@/axios/case/mediatorCase";
import OrgRank from "@/types/response/orgRank";
import { CaseStatisticLuo, getCaseStatisticLuo } from "@/axios/case/caseReq";
import MediatorsOrg from "../organization/MediatorsOrg.vue";
import MediatorsOrganization from "@/types/response/mediatorsOrganization";
const initHistogram = (data:{name:string,value:number}[]) => {
let chartDom = document.getElementById('pie');
let myChart = echarts.init(chartDom);
let option={
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: '',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data,
    }
  ]
};

option && myChart.setOption(option);
};
const orgRankList:Ref<OrgRank[]> =ref([]);
onMounted(() => {
  initHistogram(CaseStatisticLuo.toArray(new CaseStatisticLuo()))
  getCaseStatisticLuo().then(res=>{
    initHistogram(CaseStatisticLuo.toArray(res));
  })
  getOrgsRank().then(res => {
    orgRankList.value = res;

  });
});
</script>
<template>
  <div id="histogram-container"  style="display: flex; ">
    <div id="pie" style="flex: 4;width:0px; height: 700px"></div>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
    <template #header>
    <div>
    <span>调解组织排名</span>
    </div>
    </template>
    <el-table :data="orgRankList" style="width: 500px;margin-right: 50px;height: 600px;">
      <el-table-column label="排名" width="180">
          <template #default="scope">
            {{ scope.$index + 1 }}
          </template>
      </el-table-column>
      <el-table-column prop="org" label="分会" width="180">
        <template #default="scope">
          {{ MediatorsOrganization.getName(scope.row.org) }}
        </template>
      </el-table-column>
      <el-table-column prop="number" label="调解成功案件数" />
    </el-table>
    </el-card>
    
   
  </div>
</template>
<style scoped>
.lineContainer{
  display: flex;
}
</style>
